<%@ page language="java" pageEncoding="UTF-8"%>
<%@include file="/common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My JSP 'load.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="../css/handle.css">
	
	
<style>
    body{
        background:#fff url(desc.png) no-repeat top center;
        font-family:Arial;
        height:2000px;
    }
    .header
    {
        width:600px;
        height:56px;
        position:absolute;
        top:50%;
        left:10px;
        background:#fff url(title.png) no-repeat top left;
    }

    a.back{
        width:256px;
        height:73px;
        position:absolute;
        bottom:15px;
        right:15px;
        background:#fff url(codrops_back.png) no-repeat top left;
    }
    a.dry{
        position:absolute;
        bottom:15px;
        left:15px;
        text-align:left;
        font-size:12px;
        color:#ccc;
        text-transform:uppercase;
        text-decoration:none;
    }
</style>
<script src="../js/jquery-1.7.js"></script>
<script src="../js/jquery.masonry.min.js"></script>
<script type="text/javascript">

		//划出导航 
		$(function() {
                var d=300;
                $('#navigation a').each(function(){
                    $(this).stop().animate({
                        'marginTop':'-80px'
                    },d+=150);
                });

                $('#navigation > li').hover(
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-2px'
                    },200);
                },
                function () {
                    $('a',$(this)).stop().animate({
                        'marginTop':'-80px'
                    },200);
                }
            );
            });

//瀑布流布局
$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 240
  });
});

var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});
</script>
 
 </head>
	<body>
	 <div class="header"></div>
        <ul id="navigation">
            <li class="home"><a href=""><span>Home</span></a></li>
            <li class="about"><a href=""><span>About</span></a></li>
            <li class="search"><a href=""><span>Search</span></a></li>
            <li class="photos"><a href=""><span>Photos</span></a></li>
            <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
            <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
            <li class="contact"><a href=""><span>Contact</span></a></li>
        </ul>
	
   <div id="container">
   
     <c:forEach var="list" items="${BarterList}">
     	<c:out value="${BarterList.size()}"></c:out>
         <div class="item" style="margin-top:30px"><img src="../img/01b.jpg"></img></div>
	 </c:forEach>
	  <div class="item" style="margin-top:20px"><img src="../img/05b.jpg"></img></div>
	  <div class="item" style="margin-top:20px"><img src="../img/06b.jpg"></img></div>
	  <div class="item" style="margin-top:20px"><img src="../img/07b.jpg"></img></div>
	  <div class="item" style="margin-top:20px"><img src="../img/08b.jpg"></img></div>
	  <div class="item" style="margin-top:20px"><img src="../img/09b.jpg"></img></div>
	  <div class="item" style="margin-top:20px"><img src="../img/10b.jpg"></img></div>
	  
 	</div>
   
  </body>
</html>
